<template>
  <div class="comment text-color">
    <div class="head-img text-xs text-overflow">
      {{ (commentObj.user_name as string).slice(0, 3) }}
    </div>
    <div class="textarea-box">
      <span class="f1 df">
        <el-input
          v-model="commentObj.user_name"
          placeholder="请自定义用户名"
          style="margin-right: 10px" />
        <el-input v-model="commentObj.url" placeholder="博客地址" style="margin-right: 10px" />
        <el-input v-model="commentObj.email" placeholder="邮箱" />
      </span>
      <div class="mt10">
        <el-input
          v-model="commentObj.content"
          :placeholder="placeholder"
          show-word-limit
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 2 }" />
      </div>
      <div class="df jc-e mt10">
        <el-button type="primary" @click="submit">发布</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useUserStore } from '@/stores/userStore';
  import { useCasualUser } from '@/stores/casualUserStore';
  import type { IComment, IIp } from '@/apis/type';
  const props = defineProps(['answerAuthor']);
  let ipInfo = inject('ipInfo') as IIp;
  if (!ipInfo) {
    ipInfo = JSON.parse(sessionStorage.getItem('ipInfo') as string);
  }
  const commentObj = ref({} as IComment);
  let placeholder = ref('请文明发言');
  if (props.answerAuthor) {
    placeholder.value = `回复 @${props.answerAuthor} :`;
    commentObj.value.answer = props.answerAuthor;
  }
  const userStore = useUserStore();
  const casualuserStore = useCasualUser();
  const user = computed(() => userStore.getUser());
  const casualuser = computed(() => casualuserStore.getCasualUser());
  if (user.value.id) {
    // 当前有用户登录
    commentObj.value.user_id = user.value.id;
    commentObj.value.email = user.value.email;
    commentObj.value.user_name = user.value.username_text;
  } else if (casualuser.value.username) {
    // 当前有临时评论用户
    commentObj.value.user_name = casualuser.value.username;
    commentObj.value.email = casualuser.value.email;
  } else {
    // 游客随机名
    commentObj.value.user_name = `游客${new Date().getTime()}`;
  }
  // 监听修改随机名 同步缓存 不存在登录用户时
  watch([() => commentObj.value.user_name, () => commentObj.value.email], val => {
    if (!user.value.id) useCasualUser().setCasualUser({ username: val[0], email: val[1] });
  });
  // 从缓存同步展示 不存在登录用户时
  watch(
    () => casualuser.value.username,
    val => {
      if (!user.value.id) commentObj.value.user_name = val;
    }
  );
  const emits = defineEmits(['submit', 'close', 'update']);
  const submit = async () => {
    commentObj.value.ip = ipInfo.ip;
    commentObj.value.ip_address = ipInfo.ip_address;
    emits('submit', commentObj.value);
    emits('close');
    commentObj.value.content = '';
  };
</script>

<style lang="scss" scoped>
  .comment {
    display: flex;
    margin-top: 20px;
    .head-img {
      width: 40px;
      height: 40px;
      border-radius: 100%;
      background: linear-gradient(
        300deg,
        #ffffff 1%,
        #ead2ea 10.2%,
        #e4d5ee 19.6%,
        #d1def3 36.8%,
        #b5dee5 62.2%,
        #cfebf3 88.9%,
        #ffffff 99%
      );
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 1s ease-in-out;
      transform-origin: 50% 50%;
      margin-right: 10px;
      justify-content: center;
      color: #000;
    }
    .head-img:hover {
      transform: rotate(360deg);
    }
    .textarea-box {
      flex: 1;
      margin-top: 5px;
    }
  }
</style>
